<template>
  <transition name="page-fade" appear>
    <div class="profile-complete-container">
    <div class="complete-card">
      <div class="card-header">
        <h2 class="title">完善个人信息</h2>
        <p class="subtitle">请完善您的个人信息以继续使用</p>
      </div>
      
      <div class="form-container">
        <!-- 头像上传区域 -->
        <div class="avatar-section">
          <div class="avatar-upload" @click="triggerFileInput">
            <div v-if="form.avatar" class="avatar-preview">
              <img :src="form.avatar" alt="头像" class="avatar-image" />
            </div>
            <div v-else class="upload-box">
              <el-icon class="upload-icon"><Plus /></el-icon>
              <span class="upload-text">上传头像</span>
            </div>
          </div>
          <input 
            ref="fileInput" 
            type="file" 
            accept="image/*" 
            @change="handleAvatarUpload" 
            class="file-input"
          />
        </div>
        
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="0px"
          class="complete-form"
        >
          <div class="form-row">
            <el-form-item prop="schoolNum" class="form-item">
              <div class="input-wrapper">
                <label class="input-label">学号</label>
                <el-input v-model="form.schoolNum" placeholder="请输入学号" class="custom-input" />
              </div>
            </el-form-item>
            <el-form-item prop="schoolName" class="form-item">
              <div class="input-wrapper">
                <label class="input-label">学校名称</label>
                <el-input v-model="form.schoolName" placeholder="请输入学校名称" class="custom-input" />
              </div>
            </el-form-item>
          </div>
        
        <div class="form-row">
          <el-form-item prop="major" class="form-item">
            <div class="input-wrapper">
              <label class="input-label">专业</label>
              <el-input v-model="form.major" placeholder="请输入专业" class="custom-input" />
            </div>
          </el-form-item>
          <el-form-item prop="grade" class="form-item">
            <div class="input-wrapper">
              <label class="input-label">年级</label>
              <el-input v-model="form.grade" placeholder="请输入年级" class="custom-input" />
            </div>
          </el-form-item>
        </div>
        
        <div class="form-row">
          <el-form-item prop="classNum" class="form-item">
            <div class="input-wrapper">
              <label class="input-label">班级</label>
              <el-input v-model="form.classNum" placeholder="请输入班级" class="custom-input" />
            </div>
          </el-form-item>
          <el-form-item prop="email" class="form-item">
            <div class="input-wrapper">
              <label class="input-label">邮箱</label>
              <el-input v-model="form.email" placeholder="请输入邮箱" type="email" class="custom-input" />
            </div>
          </el-form-item>
        </div>
        
        <el-form-item prop="address" class="form-item-full">
          <div class="input-wrapper">
            <label class="input-label">地址</label>
            <el-input v-model="form.address" placeholder="请输入详细地址" type="textarea" :rows="3" class="custom-textarea" />
          </div>
        </el-form-item>
        
          <el-form-item>
            <el-button type="primary" @click="submitForm" :loading="loading" class="submit-btn">
              完成
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  </transition>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

import { Plus } from '@element-plus/icons-vue'
import axios from 'axios'
import { handleProfileUpdateError, showSuccess } from '@/utils/errorHandler'
import { error } from '@/utils/alert'

const router = useRouter()
const formRef = ref()
const fileInput = ref()
const loading = ref(false)

const form = reactive({
  avatar: '',
  schoolNum: '',
  schoolName: '',
  major: '',
  grade: '',
  classNum: '',
  email: '',
  address: ''
})

const rules = {
  schoolNum: [{ required: true, message: '请输入学号', trigger: 'blur' }],
  schoolName: [{ required: true, message: '请输入学校名称', trigger: 'blur' }],
  major: [{ required: true, message: '请输入专业', trigger: 'blur' }],
  grade: [{ required: true, message: '请输入年级', trigger: 'blur' }],
  classNum: [{ required: true, message: '请输入班级', trigger: 'blur' }],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  address: [{ required: true, message: '请输入地址', trigger: 'blur' }]
}

// 触发文件选择
const triggerFileInput = () => {
  fileInput.value.click()
}

// 处理头像上传
const handleAvatarUpload = async (event) => {
  const file = event.target.files[0]
  if (!file) return
  
  try {
    // 验证文件
    if (!file.type.startsWith('image/')) {
      error('请选择图片文件')
      return
    }
    
    if (file.size > 5 * 1024 * 1024) {
      error('图片大小不能超过5MB')
      return
    }
    
    // 使用文件上传API
    const token = localStorage.getItem('token')
    if (!token) {
      error('请先登录')
      return
    }
    
    const formData = new FormData()
    formData.append('avatar', file)
    
    const baseUrl = process.env.VUE_APP_API_BASE.trim()
    const response = await axios.post(`${baseUrl}/api/auth/upload-avatar`, formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Authorization': `Bearer ${token}`
      }
    })
    
    if (response.data.success) {
      form.avatar = response.data.avatarUrl
      showSuccess('头像上传成功')
    } else {
      error(response.data.message || '头像上传失败')
    }
    
  } catch (error) {
    console.error('头像上传失败:', error)
    error(error.response?.data?.message || '头像上传失败，请重新选择')
  }
  
  // 清空文件输入，允许重新选择同一文件
  event.target.value = ''
}

const submitForm = async () => {
  try {
    await formRef.value.validate()
    loading.value = true
    
    const token = localStorage.getItem('token')
    if (!token) {
      error('请先登录')
      router.push('/login')
      return
    }
    
    const baseUrl = process.env.VUE_APP_API_BASE.trim()
    const response = await axios.put(`${baseUrl}/api/auth/profile`, {
      schoolNum: form.schoolNum,
      schoolName: form.schoolName,
      major: form.major,
      grade: form.grade,
      classNum: form.classNum,
      email: form.email,
      address: form.address
    }, {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    })
    
    if (response.data.success) {
      showSuccess('个人信息完善成功')
      router.push('/home')
    } else {
      error(response.data.message || '完善信息失败')
    }
  } catch (error) {
    handleProfileUpdateError(error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.profile-complete-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.complete-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 40px;
  width: 100%;
  max-width: 650px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
}

.complete-card:hover {
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* 头像上传样式 */
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
}

.avatar-upload {
  position: relative;
  cursor: pointer;
  margin-bottom: 10px;
}

.avatar-preview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(102, 126, 234, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.avatar-preview:hover {
  border-color: #667eea;
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-box {
  width: 120px;
  height: 120px;
  border: 2px dashed rgba(102, 126, 234, 0.4);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 8px;
}

.upload-box:hover {
  border-color: #667eea;
  background: rgba(102, 126, 234, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}

.upload-icon {
  font-size: 28px;
  color: #667eea;
}

.upload-text {
  color: #666;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.file-input {
  display: none;
}

/* 表单布局样式 */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-item {
  flex: 1;
  margin-bottom: 0 !important;
}

.form-item-full {
  margin-bottom: 20px;
}

.input-wrapper {
  position: relative;
}

.input-label {
  display: block;
  margin-bottom: 8px;
  color: #374151;
  font-weight: 600;
  font-size: 14px;
}

/* 自定义输入框样式 */
:deep(.custom-input .el-input__wrapper) {
  background: #ffffff !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(102, 126, 234, 0.2) !important;
  border-radius: 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 12px 16px;
  box-shadow: none !important;
  outline: none !important;
  transform: translateZ(0);
}

:deep(.custom-input .el-input__wrapper:hover) {
  border-color: rgba(102, 126, 234, 0.4) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1) !important;
  transform: translateY(-1px);
}

:deep(.custom-input.is-focus .el-input__wrapper) {
  border-color: #667eea !important;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1), 0 4px 12px rgba(102, 126, 234, 0.15) !important;
  background: #ffffff !important;
  outline: none !important;
  transform: translateY(-1px);
}

:deep(.custom-input .el-input__wrapper.is-focus) {
  border-color: #667eea !important;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1) !important;
  background: #ffffff !important;
  outline: none !important;
}

:deep(.custom-input .el-input__inner) {
  font-size: 15px;
  color: #333 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

:deep(.custom-input .el-input__inner:focus) {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

:deep(.custom-input .el-input__inner::placeholder) {
  color: #999;
}

/* 自定义文本域样式 */
:deep(.custom-textarea .el-textarea__inner) {
  background: #ffffff !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(102, 126, 234, 0.2) !important;
  border-radius: 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 12px 16px;
  font-size: 15px;
  resize: vertical;
  min-height: 80px;
  box-shadow: none !important;
  outline: none !important;
  color: #333 !important;
  transform: translateZ(0);
}

:deep(.custom-textarea .el-textarea__inner:hover) {
  border-color: rgba(102, 126, 234, 0.4) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1) !important;
  transform: translateY(-1px);
}

:deep(.custom-textarea .el-textarea__inner:focus) {
  border-color: #667eea !important;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1), 0 4px 12px rgba(102, 126, 234, 0.15) !important;
  background: #ffffff !important;
  outline: none !important;
  transform: translateY(-1px);
}

:deep(.custom-textarea .el-textarea__inner::placeholder) {
  color: #999;
}

.card-header {
  text-align: center;
  margin-bottom: 30px;
}

.title {
  font-size: 28px;
  color: #1f2937;
  font-weight: 700;
  margin: 0 0 10px 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  color: #6b7280;
  font-size: 16px;
  margin: 0;
}

.form-container {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.complete-form {
  flex: 1;
}

:deep(.el-form-item__label) {
  color: #374151;
  font-weight: 600;
}

.submit-btn {
  width: 100%;
  height: 50px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 30px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.submit-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

.submit-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.submit-btn:disabled {
  transform: none;
  opacity: 0.7;
  cursor: not-allowed;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .complete-card {
    padding: 30px 20px;
    margin: 10px;
    max-width: 100%;
  }
  
  .form-container {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  
  .avatar-section {
    order: -1;
  }
  
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  
  .form-item {
    margin-bottom: 20px !important;
  }
  
  .title {
    font-size: 24px;
  }
  
  .avatar-preview,
  .upload-box {
    width: 100px;
    height: 100px;
  }
  
  .upload-icon {
    font-size: 24px;
  }
}

/* 移除Element Plus默认样式 */
:deep(.el-form-item) {
  margin-bottom: 0;
}

:deep(.el-form-item__error) {
  padding-top: 4px;
  font-size: 12px;
  color: #f56565;
}

/* 强制覆盖所有可能的Element Plus默认样式 */
:deep(.el-input__wrapper) {
  box-shadow: none !important;
  outline: none !important;
}

:deep(.el-input__inner) {
  box-shadow: none !important;
  outline: none !important;
}

:deep(.el-textarea__inner) {
  box-shadow: none !important;
  outline: none !important;
}

:deep(.el-input__wrapper:focus) {
  box-shadow: none !important;
  outline: none !important;
}

:deep(.el-input__inner:focus) {
  box-shadow: none !important;
  outline: none !important;
}

:deep(.el-textarea__inner:focus) {
  box-shadow: none !important;
  outline: none !important;
}

/* 页面过渡动画 */
.page-fade-enter-active,
.page-fade-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-fade-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.page-fade-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.page-fade-enter-from .complete-card {
  transform: scale(0.95);
}

.page-fade-leave-to .complete-card {
  transform: scale(0.95);
}

/* 表单项错误状态动画 */
:deep(.el-form-item.is-error .el-input__wrapper),
:deep(.el-form-item.is-error .el-textarea__inner) {
  border-color: #f56c6c !important;
  animation: shake 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-2px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(2px);
  }
}

/* 表单项成功状态动画 */
:deep(.el-form-item.is-success .el-input__wrapper),
:deep(.el-form-item.is-success .el-textarea__inner) {
  border-color: #67c23a !important;
  animation: pulse-success 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pulse-success {
  0% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.4);
  }
  70% {
    box-shadow: 0 0 0 4px rgba(103, 194, 58, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0);
  }
}
</style>